.m20{
  margin: 20upx !important;
}
.mt10{
  margin-top: 10upx !important;
}
.mt20{
  margin-top: 20upx !important;
}
.mt30{
  margin-top: 30upx !important;
}
.mt40{
  margin-top: 40upx !important;
}
.mt50{
  margin-top: 50upx !important;
}
.mr10{
  margin-right: 10upx !important;
}
.mr20{
  margin-right: 20upx !important;
}
.ml20{
  margin-left: 20upx !important;
}
.ml30{
  margin-left: 30upx !important;
}
.ml40{
  margin-left: 40upx !important;
}
.mr30{
  margin-right: 30upx !important;
}
.mr40{
  margin-right: 40upx !important;
}
.ml10{
  margin-left: 10upx !important;
}
.mb20{
  margin-bottom: 20upx !important;
}
.mb30{
  margin-bottom: 30upx !important;
}
.mb40{
  margin-bottom: 40upx !important;
}
.ml50{
  margin-left: 50upx !important;
}
.tl{
  text-align: left;
}
.tr{
  text-align: right;
}
.tc{
  text-align: center;
}
.pd10{
  padding: 10upx !important;
}
.pd20{
  padding: 20upx !important;
}
.pd60{
  padding: 60upx !important;
}
.pl10{
  padding-left: 10upx;
}
.pt10{
  padding-top: 10upx;
}
.pt30{
  padding-top: 30upx;
}
.pr10{
  padding-right: 10upx;
}
.pr40{
  padding-right: 40upx;
}
.pb10{
  padding-bottom: 10upx;
}
.pb30{
  padding-bottom: 30upx;
}
.pd20{
  padding: 20upx !important;
}
.pb20{
  padding-bottom: 20upx !important;
}
.pb40{
  padding-bottom: 40upx !important;
}
.pb80{
  padding-bottom: 80upx !important;
}
.pt20{
  padding-top: 20upx !important;
}
.pl20{
  padding-left: 20upx !important;
}
.pl40{
  padding-left: 40upx !important;
}
.pl80{
  padding-left: 80upx !important;
}
.pr20{
  padding-right: 20upx !important;
}
.pt50{
  padding-top: 50upx !important;
}
.tp400{
  top: 400upx !important;
}

.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-center{
  justify-content: center;
  align-items: center;
}
.flex-1{
  flex: 1;
}
.flex-warp{
  display: flex;
  flex-wrap: wrap;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;

}
.justify-around {
  justify-content: space-around;
}
.justify-center {
  justify-content: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}

.red{
  color: red;
}
.brown {
  color: #aa5413;
}
.cc{
  color: #ccc;
}
.white{
  color: white;
}
.blue{
  color: blue;
}
.color1{
  color: #407EC9;
}
.color2{
  color: #71d5a1;
}
.color3{
  color: #1296db;
}
.color4{
  color: #2979ff;
}
.color5{
  color: #19be6b;
}
.color6{
  color: #ffcc00;
}
.color7{
  color: #5bbdff !important;
}
.color8{
  color: #999999;
}
.color9{
  color: #333333;
}
.color10{
  color: #ff0000;
}
.color11{
  color: #ffb300 !important;
}
.color12{
  color: #0099ff;
}
.color13{
  color: #fcee21;
}
.color14{
  color: #c4c6c9;
}
.color15{
  color: #BBBBBB;
}
.color16{
  color: #269FFF;
}
.color17{
  color: #00DBA1;
}
.color18{
  color: #FA5C3E;
}
.color19{
  color: #E8E8E8;
}
.color20{
  color: #ff5600;
}
.color21{
  color: #1b9c61;
}
.color22{
  color: #EFEFED;
}


.border-color{
  border: 2upx solid #71d5a1;
}
.border-color2{
  border: 2upx solid red;
}
.border-color3{
  border: 2upx solid #407EC9;
}
.border-top{
  border-top: 2upx dashed #407EC9;
}
.border-top2{
  border-top: 2upx dashed red;
}
.border{
  border: 1px solid #E8EBEE;
}
.bt{
  border-top: 1px solid #E8EBEE;
}
.br{
  border-right: 1px solid #E8EBEE;
}
.bb{
  border-bottom: 1px solid #E8EBEE;
}
.bl{
  border-left: 1px solid #E8EBEE;
}
.line0{
  line-height: 0;
}

.br12{
  border-radius: 12upx;
}
.br16{
  border-radius: 16upx;
}
.br20{
  border-radius: 20upx;
}

.w100{
  width: 100% !important;
}
.h100{
  height: 100vh;
}

.fw800{
  font-weight: 800;
}
.fs10{
  font-size: 20upx !important;
}
.fs12{
  font-size: 24upx !important;
}
.fs12-half{
  font-size: 25rpx !important;
}
.fs14{
  font-size: 28upx !important;
}
.fs15{
  font-size: 30upx !important;
}
.fs16{
  font-size: 32upx !important;
}
.fs18{
  font-size: 36upx !important;
}
.fs20{
  font-size: 40upx !important;
}
.fs22{
  font-size: 44upx !important;
}
.fs24{
  font-size: 48upx !important;
}
.fs26{
  font-size: 26px !important;
}
.fs28{
  font-size: 56upx !important;
}
.fs30{
  font-size: 60upx !important;
}
.fs40{
  font-size: 80upx !important;
}

.bgff{
  background-color: #fff;
}
.bgff2{
  background-color: #f7f6fa;
}
.disabled{
  background-color: #c8c9cc !important;
}
.bgcolor1{
  background-color: #febd4e;
}
.bgcolor2{
  background-color: #19be6b;
}
.bgcolor3{
  background-color: rgb(250, 200, 88);
}
.bgcolor4{
  background-color: #1296db;
}
.bgcolor5{
  background-color: #d5eeff !important;
}
.bgcolor6 {
  background-color: #efefed;
}
.bgcolor7{
  background-color: #1b9c61 !important;

}

.inline-block{
  display: inline-block;
}

.fixed{
  position: fixed;
}
.border-box{
  box-sizing: border-box;
}

.text-ellipsis{
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}

@mixin text-ellipsis {
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
@mixin more-text-ellipsis($i) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: #{$i};
  overflow: hidden;
}
.text-ellipsis2{
  @include more-text-ellipsis(2);
}
